
<template>
<div id="home">
  <div id="hometou">
    <h2 id="log">
      欢迎来到博天购物APP
    </h2>
      <div id="tou">
      <h1>
        <el-link type="" style="margin-right: 10px" @click="toLogin()">退出登录</el-link>
        <i class="el-icon-user-solid"></i>
      </h1>
      </div>
  </div>
  <div id="leiftDao">
    <el-image
        style="width: 100px; height: 100px;margin-top: 50px"
        :src="this.user.pic"
        ></el-image>
    <h2 style="color: azure">欢迎您 {{user.username}}</h2>

    <el-row>
      <el-col>
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
          style="border-right: #2c3e50">
          <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              background-color="#2c3e50"
              text-color="#fff"
              active-text-color="#ffd04b"
          style="border-right: #2c3e50">
            <el-menu-item index="1" style="width: 100%;float:left">
              <i class="el-icon-menu" ></i>
              <span slot="title">车辆信息</span>
            </el-menu-item>
            <el-menu-item index="2" @click="toUser()" style="width: 100%;float:left;">
              <i class="el-icon-menu"></i>
              <span slot="title">个人信息</span>
            </el-menu-item>
            <el-menu-item index="3" @click="toRepayment()"  style="width: 100%;float:left;">
              <i class="el-icon-menu"></i>
              <span slot="title">还款信息</span>
            </el-menu-item>
            <el-menu-item index="4" @click="toShen()" v-show="this.user.roleCode==4 || this.user.roleCode==5 || this.user.roleCode==6" style="width: 100%;float:left;">
              <i class="el-icon-menu"></i>
              <span slot="title">审核模块</span>
            </el-menu-item>
            <el-menu-item index="5" style="width: 100%;float:left;">
              <i class="el-icon-setting"></i>
              <span slot="title">系统设置</span>
            </el-menu-item>
          </el-menu>
        </el-menu>
      </el-col>
    </el-row>

  </div>

<div id="carDiv">

  <div class="carAll">
    <el-descriptions class="margin-top" :column="4" direction="vertical" border>
      <el-descriptions-item label="车辆名称"><span style="color: #42b983">{{this.tableData[0].name}}</span></el-descriptions-item>
      <el-descriptions-item label="所属品牌"><span style="color: #42b983">{{this.tableData[0].bname}}</span></el-descriptions-item>
      <el-descriptions-item label="所属类型"><span style="color: #42b983">{{this.tableData[0].tname}}</span></el-descriptions-item>
      <el-descriptions-item label="车辆颜色"><span style="color: #42b983">{{this.tableData[0].colour}}</span></el-descriptions-item>
      <el-descriptions-item label="查看详细列表">
          <el-link type="primary" @click="getByCar(tableData[0])">查看详情</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="车辆照片"><img :src="this.tableData[0].pic" width="200px" height="150px"></el-descriptions-item>
    </el-descriptions>
  </div>
  <div class="carAll">
    <el-descriptions class="margin-top" :column="4" direction="vertical" border>
      <el-descriptions-item label="车辆名称"><span style="color: #42b983">{{this.tableData[1].name}}</span></el-descriptions-item>
      <el-descriptions-item label="所属品牌"><span style="color: #42b983">{{this.tableData[1].bname}}</span></el-descriptions-item>
      <el-descriptions-item label="所属类型"><span style="color: #42b983">{{this.tableData[1].tname}}</span></el-descriptions-item>
      <el-descriptions-item label="车辆颜色"><span style="color: #42b983">{{this.tableData[1].colour}}</span></el-descriptions-item>
      <el-descriptions-item label="查看详细列表">
        <el-link type="primary" @click="getByCar(tableData[1])">查看详情</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="车辆照片"><img :src="this.tableData[1].pic" width="200px" height="150px"></el-descriptions-item>
    </el-descriptions>
  </div>
  <div class="carAll">
    <el-descriptions class="margin-top" :column="4" direction="vertical" border>
      <el-descriptions-item label="车辆名称"><span style="color: #42b983">{{this.tableData[2].name}}</span></el-descriptions-item>
      <el-descriptions-item label="所属品牌"><span style="color: #42b983">{{this.tableData[2].bname}}</span></el-descriptions-item>
      <el-descriptions-item label="所属类型"><span style="color: #42b983">{{this.tableData[2].tname}}</span></el-descriptions-item>
      <el-descriptions-item label="车辆颜色"><span style="color: #42b983">{{this.tableData[2].colour}}</span></el-descriptions-item>
      <el-descriptions-item label="查看详细列表">
        <el-link type="primary" @click="getByCar(tableData[2])">查看详情</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="车辆照片"><img :src="this.tableData[2].pic" width="200px" height="150px"></el-descriptions-item>
    </el-descriptions>
  </div>
  <div class="carAll">
    <el-descriptions class="margin-top" :column="4" direction="vertical" border>
      <el-descriptions-item label="车辆名称"><span style="color: #42b983">{{this.tableData[3].name}}</span></el-descriptions-item>
      <el-descriptions-item label="所属品牌"><span style="color: #42b983">{{this.tableData[3].bname}}</span></el-descriptions-item>
      <el-descriptions-item label="所属类型"><span style="color: #42b983">{{this.tableData[3].tname}}</span></el-descriptions-item>
      <el-descriptions-item label="车辆颜色"><span style="color: #42b983">{{this.tableData[3].colour}}</span></el-descriptions-item>
      <el-descriptions-item label="查看详细列表">
        <el-link type="primary" @click="getByCar(tableData[3])">查看详情</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="车辆照片"><img :src="this.tableData[3].pic" width="200px" height="150px"></el-descriptions-item>
    </el-descriptions>
  </div>
  <div class="carAll">
    <el-descriptions class="margin-top" :column="4" direction="vertical" border>
      <el-descriptions-item label="车辆名称"><span style="color: #42b983">{{this.tableData[4].name}}</span></el-descriptions-item>
      <el-descriptions-item label="所属品牌"><span style="color: #42b983">{{this.tableData[4].bname}}</span></el-descriptions-item>
      <el-descriptions-item label="所属类型"><span style="color: #42b983">{{this.tableData[4].tname}}</span></el-descriptions-item>
      <el-descriptions-item label="车辆颜色"><span style="color: #42b983">{{this.tableData[4].colour}}</span></el-descriptions-item>
      <el-descriptions-item label="查看详细列表">
        <el-link type="primary" @click="getByCar(tableData[4])">查看详情</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="车辆照片"><img :src="this.tableData[4].pic" width="200px" height="150px"></el-descriptions-item>
    </el-descriptions>
  </div>
  <div class="carAll">
    <el-descriptions class="margin-top" :column="4" direction="vertical" border>
      <el-descriptions-item label="车辆名称"><span style="color: #42b983">{{this.tableData[5].name}}</span></el-descriptions-item>
      <el-descriptions-item label="所属品牌"><span style="color: #42b983">{{this.tableData[5].bname}}</span></el-descriptions-item>
      <el-descriptions-item label="所属类型"><span style="color: #42b983">{{this.tableData[5].tname}}</span></el-descriptions-item>
      <el-descriptions-item label="车辆颜色"><span style="color: #42b983">{{this.tableData[5].colour}}</span></el-descriptions-item>
      <el-descriptions-item label="查看详细列表">
        <el-link type="primary" @click="getByCar(tableData[5])">查看详情</el-link>
      </el-descriptions-item>
      <el-descriptions-item label="车辆照片"><img :src="this.tableData[5].pic" width="200px" height="150px"></el-descriptions-item>
    </el-descriptions>
  </div>

  <el-dialog title="" :visible.sync="dialogCarVisible">
    <el-descriptions title="车辆详情">
      <el-descriptions-item label="车辆名称"><span style="color: #42b983">{{this.cars.name}}</span></el-descriptions-item>
      <el-descriptions-item label="车辆颜色"><span style="color: #42b983">{{this.cars.colour}}</span></el-descriptions-item>
      <el-descriptions-item label="所属品牌"><span style="color: #42b983">{{this.cars.bname}}</span></el-descriptions-item>
      <el-descriptions-item label="所属类型"><span style="color: #42b983">{{this.cars.tname}}</span></el-descriptions-item>
      <el-descriptions-item label="车辆价格"><span style="color: #42b983">{{this.cars.price}}</span></el-descriptions-item>
      <el-descriptions-item label=""></el-descriptions-item>
      <el-descriptions-item label="车辆照片">
        <img :src="this.cars.pic" width="200px" height="150px">
      </el-descriptions-item>
    </el-descriptions>
    <el-button type="primary" @click="goAddPersona()">申请白条</el-button>
  </el-dialog>



</div>

</div>
</template>

<script>

import HelloWorld from "@/components/HelloWorld.vue";
import {post} from "axios";

export default {
  components: {HelloWorld},

  data(){
    return{
      dialogCarVisible:false,
      tableData:{},
      user:{},
      cars:[]
    }
  },
  methods:{
    getByCar(row){
      this.cars = row ;
      this.dialogCarVisible = true;
    },
    goAddPersona(){
      localStorage.setItem("cars",JSON.stringify(this.cars))
      this.$router.push("/addrepayment")
    },
    //进入个人信息页面
    toUser(){
      this.$router.push("/personaldetails")
    },
    //进入还款页面
    toRepayment(){
      this.$router.push("/repay")
    },
    //进入审核页面
    toShen(){
      this.$router.push("/check")
    },
    //进入车辆信息页面
    toCar(){
      this.$router.push('/loanshome')
    },
    //退出登录
    toLogin(){
      this.axios.post('user/user/delete?code='+this.user.code).then(res=>{
        this.$router.push('/');
        localStorage.removeItem('user')
      })

    },
    initData(){
      this.axios.post(`/api/carInfo/findCarPage`).then(res=>{
        this.tableData = res.data.data;
      })
    }

  },
  created() {
    // 获取数据
    const data = JSON.parse(localStorage.getItem('user'));
    //赋值然后显示登陆人
    this.user = data
    this.initData();

  }
}
</script>


<style>
#carDiv{
  width: 80%;
  height: 86%;
  float: left;
  margin-left: 5px;
  margin-top: 10px;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  box-sizing: border-box;
}
#home{
  width: 100%;
  height: 800px;
  background-color: rgba(152, 134, 134, 0.18);
  box-sizing: border-box;
}

#hometou{
  float: right;
  width: 80%;
  height: 80px;
  background-color: rgba(44, 62, 80, 0.65);
  margin-right: 13px;
  margin-top: 10px;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#tou{
  float: right;
  margin-right: 50px;
  padding-bottom: 100px;
}

#log{
  float: left;
  margin-left: 35%;
}

#leiftDao{
  width: 18%;
  height: 97%;
  background-color: #2c3e50;
  margin-left: 12px;
  margin-top: 10px;
  float: left;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
}


.carAll{
  width: 32%;
  height: 50%;
  margin: 5px;
  float: left;
  box-shadow: 3px 3px 3px 3px rgba(152, 134, 134, 0.18);
}
</style>
